<script setup lang="ts">
import {defineProps} from 'vue';

const props = defineProps({
	data: Object as any
})
</script>
<template>
	<div class="form-card">
		<div class="form-card__header">
			<h3 class="form-card__header-title">{{ props?.data.title }}</h3>
			<p class="form-card__header-desc">{{ props?.data.description }}</p>
		</div>
		<form class="form-card__body">
			<slot name="content"></slot>
		</form>
		<div class="form-card__footer flex-center">
			<p class="form-card__footer__desc">
				{{ props?.data?.footer }}
			</p>
			<slot name="footer"></slot>
		</div>
	</div>
</template>
<style scoped lang='less'>
.form-card {
	display: grid;
	grid-template-rows:  2fr 5fr 1fr;
	margin: 0 auto;
	width: 86%;
	height: calc(100% - 0.5rem);
	
	.form-card__header {
		display: grid;
		grid-template-rows:  1fr 1fr;
		padding-top: 0.8rem;
		.form-card__header-title {
			padding: 0.2rem 0;
			font-size: 0.65rem;
			color: #313337;
		}
		
		.form-card__header-desc {
			font-size: 0.45rem;
			color: #808080;
		}
	}
	
	.form-card__body {
		margin: 0 auto;
		width: 90%;
	}
	
	.form-card__footer {
		.form-card__footer__desc {
			font-size: 0.4rem;
			text-align: center;
			color: #333538;
		}
	}
}
</style>